<template>
    <chart :id="id" :data="bar" />
</template>

<script>
import Chart from '@/components/chart/chart'

export default {
    name: 'BarChart',
    components: {Chart},
    props: {
        id: {
            type: String,
            default: 'bar1'
        },
        xData: {
            required: true,
            type: Array,
            default: () => {
                return []
            }
        },
        series: {
            required: true,
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data() {
        return {
            bar: {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.setBarData()
        })
    },
    methods: {
        setBarData() {
            this.bar = {
                xAxis: {
                    type: 'category',
                    data: this.xData,
                    axisLabel: {
                        interval: 0,
                        formatter: function(value) {
                            let list = value.split('')
                            let result = ''
                            for (let i = 1; i <= list.length; i++) {
                                if (!(i % 4) && list[i] !== undefined) {
                                    result += list[i - 1] + '\n'
                                } else {
                                    result += list[i - 1]
                                }
                            }
                            return result
                        }
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: this.series,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        },
                        itemStyle: {
                            normal: {
                                color(params) {
                                    const colorList = ['rgba(97, 165, 232, 1)', 'rgba(126, 207, 81, 1)', 'rgba(238, 203, 95, 1)', 'rgba(149, 112, 229, 1)', 'rgba(126, 207, 81, 1)']
                                    return colorList[params.dataIndex]
                                }
                            }
                        },
                        barGap: 7// 关键属性
                    }
                ]
            }
        }
    }
}
</script>

<!--<style scoped>-->

<!--</style>-->
